@import '../index.less';

.nav-icon {
    .element;
    overflow: hidden;
    .nav-icon-list {
        text-decoration: inherit;
        overflow: hidden;
        &.nav-icon-sideslip {
            display: block;
            white-space: nowrap;
            // overflow-x: auto;
            .horizontal-scrollbar;
            .nav-icon-item {
                float: none;
                display: inline-block;
            }
        }
        .nav-icon-item {
            box-sizing: border-box;
            text-align: center;
            float: left;
            .nav-icon-item-img-wrap {
                margin: 10px auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                overflow: hidden;
                .nav-icon-item-img {
                    display: inline-block;
                    vertical-align: middle;
                    width: 20px;
                    height: 20px;
                    box-sizing: content-box;
                    border-radius: inherit;
                    pointer-events: none;
                    ::v-deep(.el-image__wrapper) {
                        border-radius: inherit;
                    }
                    .picture-image-slot {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;
                        color: #909399;
                        font-size: 14px;
                        border-radius: inherit;
                        &.no-image {
                            background-color: #f5f7fa;
                            border: 1px solid #DCDFE6;
                            box-sizing: border-box;
                        }
                    }
                }
            }
            .nav-icon-item-title {
                font-size: 12px;
                margin-bottom: 10px;
                padding: 0 5px;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }
    .nav-icon-dropdown {
        text-align: center;
        margin-top: -5px;
        padding: 10px 10px 5px;
        .el-icon {
            transition: all .2s linear;
            color: #909399;
        }
    }
}